<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML5本地存储技术</h1>
    <h2>localStorage对象&sessioinStorage对象</h2>
    <p>共同点：两者都是存储在浏览器本地的数据，且它们只能存储“字符串”数据。</p>
    <p>域的概念：http://127.0.0.1:8080，只要以下三者都一样，就表示在同一个域当中。</p>
    <ul>
        <li>协议：http</li>
        <li>主机名：127.0.0.1</li>
        <li>端口号: 8080</li>
    </ul>
    <ul>
        <li>localStorage：除非用户清除浏览器缓存，或者程序员调用清空数据的方法，在一个域中永久地存储数据。</li>
        <li>sessionStorage：在一个域中存储数据，如果浏览器的选项卡被关闭，数据也会被清空。</li>
    </ul>
    <h2>常用方法</h2>
    <ul>
        <li>setItem(key,stringValue)：存储一组键值对。</li>
        <li>getItem(key)：通过键，获取值。</li>
        <li>removeItem(key)：删除键对应的存储值。</li>
    </ul>
    <button onclick="handleSave()">存储</button>
    <button onclick="handleClear()">清除</button>
    <button onclick="handleLoad()">读取</button>

    <script>
        function handleSave() {
            let stu = {name: "奉先",age: 35};

            // 把JS对象，转为json字符串传（序列化）。
            let jsonStu = JSON.stringify(stu);

            localStorage.setItem("fengxian",jsonStu);
            sessionStorage.setItem("fengxian",jsonStu);
        }

        function handleClear() {
            localStorage.removeItem("fengxian");
            sessionStorage.removeItem("fengxian");
        }

        function handleLoad() {
            let jsonStu = localStorage.getItem("fengxian");
            if (jsonStu) {
                // json字符串转js对象（反序列化）
                stu = JSON.parse(jsonStu);
                console.log("localStorage = ",stu);
            }

            jsonStu = sessionStorage.getItem("fengxian");
            if (jsonStu) {
                stu = JSON.parse(jsonStu);
                console.log("localStorage = ",stu);
            }
        }
    </script>
</body>
</html>